<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="page-view-size" content="1280*720" />
    <link rel="stylesheet" href="style/base.css" />
    <title>熊猫部落-列表页</title>
    <style>
      body {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 1280px;
        height: 720px;
        background-repeat: no-repeat;
        background-color: transparent;
        overflow: hidden;
      }
      #title,
      #page {
        color: #fff;
        position: absolute;
        top: 40px;
      }
      #title {
        left: 50px;
        font-size: 30px;
        top: 30px;
      }
      #page {
        right: 50px;
        font-size: 18px;
      }
      #page .color {
        color: #feb802
      }
      #list-container {
        position: absolute;
        left: 50px;
        right: 50px;
        top: 90px;
      }
      .item {
        position: absolute;
        width: 272px;
        height: 163px;
        border-radius: 15px;
        overflow: hidden;
      }
      #list-0,
      #list-4,
      #list-8 {
        left: 0;
      }
      #list-1,
      #list-5,
      #list-9 {
        left: 302px;
      }
      #list-2,
      #list-6,
      #list-10 {
        left: 604px;
      }
      #list-3,
      #list-7,
      #list-11 {
        left: 906px;
      }
      #list-0,
      #list-1,
      #list-2,
      #list-3 {
        top: 0;
      }
      #list-4,
      #list-5,
      #list-6,
      #list-7 {
        top: 193px;
      }
      #list-8,
      #list-9,
      #list-10,
      #list-11 {
        top: 386px;
      }

      #main .item-view {
        height: 40px;
        font-size: 18px;
        color: #fff;
        overflow: hidden;
        position: relative;
        padding: 0 20px;
        bottom: 40px;
        background: url(./images/mark_bg.png) repeat-x;
      }

      #main .item-text {
        line-height: 40px;
        height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
      }
      #main .focus .item-text{
        position: absolute;
      }
    </style>
  </head>
  <body onload="init()" onunload="exit()">
    <div id="main">
      <!--联通不要 -->
      <div class='smallResolution' id="smallResolution"></div>
	  <!--联通不要 -->
      <div id="title"></div>
      <div id="page"></div>
      <div id="list-container"></div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="config/index.js"></script>
    <script src="api/index.js"></script>
    <script src="js/utlis.js"></script>
    <script src="js/KeyEnter.js"></script>
    <script src="js/event.js"></script>
    <script src="js/move.js"></script>
    <script src="js/log.js"></script>
    <script src="js/page.js"></script>

    <script src="components/list.js"></script>
    <script src="components/dialog.js"></script>

    <script>
      function init() {
        page.init();
        getPreFocus();
        log.commit({
          name: '熊猫列表页面',
          type1: 'browse',
          type2: 'brand',
          starttime: new Date().getTime(),
        })
      }

      function getPreFocus() {
        var typeName = unescape(utils.getUrlParam("typeName", ""));
        var typeId = utils.getUrlParam("typeId", "");
        var pageSize = utils.getUrlParam("page", 1);
        var elId = utils.getUrlParam("elId", "list-0")
        list.page = pageSize;
        list.typeId = typeId;
        list.typeName = typeName;
        list.init();
        var dom = document.getElementById(elId)
        dom && utils.toggleClass(dom)
      }

      function keyUp() {
        var prev = $(".focus");
        var dom = move.up();
        if (dom) {
          utils.toggleClass(dom);
        } else {
          if (list.page > 1) {
            var index = parseInt(getIndex(prev)) + 8;
            list.focusId = "list-" + index;
            list.page--;
            list.getData();
            utils.toggleClass(document.getElementById(list.focusId));
          }
        }
      }

      function keyDown() {
        var prev = $(".focus");
        var dom = move.down();
        if (dom) {
          utils.toggleClass(dom);
        } else {
          if (list.page < list.totalPage) {
            var index = (parseInt(getIndex(prev)) + 4) % 4;
            list.page++;
            list.getData();
            if (index > page.data.list.length - 1) {
              list.focusId = "list-" + (page.data.list.length - 1);
            } else {
              list.focusId = "list-" + index;
            }
            utils.toggleClass(document.getElementById(list.focusId));
          }
        }
      }

      function keyLeft() {
        var dom = move.left();
        dom && utils.toggleClass(dom);
      }

      function keyRight() {
        var dom = move.right();
        dom && utils.toggleClass(dom);
      }

      function getIndex(dom) {
        var id = dom.attr("id");
        return id.match(/\d+/)[0];
      }

      function keyEnter () {
        var info = utils.getCurInfo()
        var elId = info.id
        var typeName = escape(list.typeName)
        var typeId = list.typeId
        var pageSize = list.page
        var data = page.data.list[info.index]
        var form = config.path + '/brand.html?elId=' + elId + '&typeName=' + typeName + '&typeId=' + typeId + '&page=' + pageSize
        var to = config.path + "/vod.html?seriesId=" + data.ID
        page.addUrl(to, form)
      }

      function exit() {
      }

      function keyBack () {
        if (dialog.visible) {
          dialog.hide()
        } else {
          page.goback()
        }
      }
    </script>
  </body>
</html>
